<template>
  <div>
    <el-dialog
      title="CloudFlare DNS一键配置"
      :append-to-body="true"
      :visible.sync="valuesDialogVisible"
      :close-on-click-modal="false"
      class="mt-dialog"

      width="50%"
      @close="close"
    >
      <el-form v-loading="listLoading" :model="temp" label-position="left" label-width="120px">
        <el-form-item label="cloudflare账号">
          <el-select
            v-model="temp.cloudflareconfig_id"
            placeholder="选择账号"
            filterable
            remote
            reserve-keyword
            :loading="pagelading"
            :remote-method="SearchCloudFlare"
          >
            <el-option v-for="item in this.cfconfigs" :key="item.id" :label="item.email" :value="item.id" />
          </el-select>
        </el-form-item>
        <el-form-item label="根域名">
          <el-input v-model="temp.domain" />
        </el-form-item>
        <el-form-item label="ip">
          <el-input v-model="temp.ip" />
        </el-form-item>
        <el-form-item label="DNS Proxy">
          <el-switch v-model="temp.proxy" />
        </el-form-item>
        <el-form-item label="zoho_txt">
          <el-input v-model="temp.zoho_txt" />
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="valuesDialogVisible = false">取 消</el-button>
        <el-button type="danger" @click="SetNDS">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { CloudFlareAllinOne } from '@/api/orders/cloudflare'
import { Get as GetCFConfig } from '@/api/prestashop/cloudflareconfig'
import qs from 'qs'
import Cookies from 'js-cookie'

export default {
  name: 'Cloudflareallinone',
  props: ['valuesVisible', 'domain', 'ip'],
  data() {
    return {
      cfconfigs: [],
      listLoading: false,
      valuesDialogVisible: false,
      title: '',
      page: 1,
      query: '',
      pagelading: false,
      temp: {
        cloudflareconfig_id: '',
        domain: this.domain,
        ip: this.ip,
        proxy: true,
        zoho_txt: ''
      }
    }
  },
  watch: {
    valuesVisible(v) {
      this.valuesDialogVisible = v
    },
    domain(v) {
      if (v) {
        this.temp.domain = v
      }
    },
    ip(v) {
      if (v) {
        this.temp.ip = v
      }
    }
  },
  created() {
    this.temp.cloudflareconfig_id = Cookies.get('clfcd') || ''
    this.GetCloudConfigs()
  },
  methods: {
    GetCloudConfigs() {
      GetCFConfig(null, qs.stringify({
        kw: this.query,
        pagesize: 100,
        page: this.page,
        order_by: this.order_by,
        order_desc: this.order_desc
      }))
        .then(response => {
          this.cfconfigs = response.data.data
        }).catch(err => {
          console.log(err)
        })
    },
    SearchCloudFlare(query) {
      if (query !== '') {
        this.temp.cloudflareconfig_id = ''
        this.cfconfigs = []
        this.query = query
        this.GetCloudConfigs()
      }
    },
    SetNDS() {
      this.listLoading = true
      Cookies.set('clfcd', this.temp.cloudflareconfig_id)
      CloudFlareAllinOne(this.temp)
        .then(response => {
          this.listLoading = false
          this.notify('设置成功')
        }).catch(err => {
          console.log(err)
          this.listLoading = false
        })
    },
    notify(message, duration) {
      this.$notify({
        title: '成功',
        message: message,
        type: 'success',
        duration: duration || 2000
      })
    },
    close() {
      this.$emit('closeMyDialog', false)
    }
  }
}
</script>

<style scoped>
  .el-tag + .el-tag {
    margin-left: 10px;
  }

  .top >>> .el-select .el-input {
    width: 350px;
  }

  .top >>> .input-with-select .el-input-group__prepend {
    background-color: #fff;
  }

  .top {
    padding-left: 20px;
    margin-bottom: 30px;
    margin-top: 28px;
  }

  .input-with-select {
    width: calc(100% - 200px);
  }

  .add-btn {
    float: right;
    margin-right: 20px;
    width: 150px
  }

  .mt-pagination {
    float: right;
    margin-top: 5px;
  }

  .app-container >>> .el-dialog {
    margin-top: 48px !important;
    margin-bottom: 68px;
  }

  .mt-dialog >>> .el-transfer-panel {
    width: calc(50% - 60px);
  }

  .mt-form >>> .el-select {
    width: 100%;
  }

  .mt-form >>> .el-input__inner {
    width: 100%;
  }

  .mt-dialog >>> .el-dialog {
    margin-top: 60px;
    /*margin: 168px auto !important;*/
  }

  .mt-dialog >>> .el-dialog__body {
    padding-bottom: 100px;
  }
</style>
